<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>推荐记录</title>

    <!-- 微信UI库 -->
    <link rel="stylesheet" href="libs/weui/weui.css">

    <!-- 微信JS库 -->
    <script type="text/javascript" src="libs/weui.js/weui.js"></script>
    <!-- jQuery -->
    <script type="text/javascript" src="libs/jquery/jquery-2.2.3.min.js"></script>
    <!-- 微信JS-SDK -->
    <script type="text/javascript" src="libs/js-sdk/jweixin-1.2.0.js"></script>
    <!-- 自定义公共JS -->
    <script type="text/javascript" src="js/app.js"></script>

    <style>
        .weui-tab{
            /*position: fixed;
            top: 0;
            width: 100%;*/
        }
        .weui-cells {
            margin-top: 0;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div class="weui-navbar">
                <div class="weui-navbar__item weui-bar__item_on" data-type="register">
                    通过注册
                </div>
                <div class="weui-navbar__item" data-type="sign">
                    报名成功
                </div>
            </div>

            <div class="weui-tab__panel">
                <div class="weui-panel weui-panel_access">
                    <div class="weui-cells" id="recordCells">

                        <!--<div class="weui-cell">
                            <div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
                            <div class="weui-cell__bd">
                                <p>标题文字11</p>
                            </div>
                            <div class="weui-cell__ft">说明文字</div>
                        </div>-->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div id="console"></div>

    <script type="text/javascript">
        $(function() {
            //获取URL中的openid参数
            var openid = Commons.getRequestParam('openid')
            var mobile = Commons.getRequestParam('mobile')
            var recordCells = $('#recordCells');

            $('.weui-navbar__item').on('click', function () {
                $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
                var type = $(this).data('type');
                if(type === 'sign') {
                    loadMySignSuccessRecord(openid, mobile)
                } else {
                    loadMyInvitedRecord(openid, mobile)
                }

            });

            $.ajax({
                type: 'POST',
                url: Commons.WEIXIN_OAUTH_H5_URL + '/wx/jssdk/config',
                dataType: 'JSON',
                success: function(result) {
                    wx.config({
                        debug: false, 					// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: result.appid, 			// 必填，公众号的唯一标识
                        timestamp: result.timestamp, 	// 必填，生成签名的时间戳
                        nonceStr: result.noncestr, 		// 必填，生成签名的随机串
                        signature: result.signature,	// 必填，签名，见附录1
                        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        jsApiList: [
                        ]
                    });

                    wx.ready(function(){

                        //默认加载我的推荐人列表（通过注册）
                        loadMyInvitedRecord(openid, mobile)

                    });
                    wx.error(function(res){
                        console.info(res);
                    });
                },
                error: function(e, ee) {
                    console.info(e);
                }
            })

            //加载我推荐的记录，type（register:注册成功，sign:报名成功）
            function loadMyInvitedRecord(openid, mobile) {
                var loading ;
                var data = {'refereeOpenid': openid, 'mobile': mobile}
                $.ajax({
                    type: 'get',
                    data: data,
                    url: Commons.WEIXIN_OAUTH_H5_URL + '/wx/xczs/getMyInvitedList',
                    beforeSend: function () {
                        loading = weui.loading('加载中');
                        recordCells.empty()
                    },
                    success: function (result) {
                        if(result.list.length > 0) {

                            $.map(result.list, function(p) {
                                var cell = ''+
                                    '<div class="weui-cell">'+
                                    '<div class="weui-cell__hd"><img src="'+p.headimgurl+'" alt="" style="width:20px;margin-right:5px;display:block"></div>'+
                                    '<div class="weui-cell__bd">'+
                                    '<p>'+p.nickname+'&nbsp;'+p.mobile.substr(0,3)+"****"+p.mobile.substr(7)+'</p>'+
                                    '</div>'+
                                    '<div class="weui-cell__ft">说明文字</div>'+
                                    '</div>';

                                recordCells.append(cell);
                            })
                        } else {
                            recordCells.html('暂无记录')
                        }
                        loading.hide();
                    },
                    complete: function () {
                    },
                    error: function (data) {
                        loading.hide();
                    }
                })
            }

            //加载我的推荐报名成功的用户记录
            function loadMySignSuccessRecord(openid, mobile) {
                var loading ;
                var data = {'refereeOpenid': openid, 'mobile': mobile}
                $.ajax({
                    type: 'get',
                    data: data,
                    url: Commons.WEIXIN_OAUTH_H5_URL + '/wx/xczs/getMyInvitedList',
                    beforeSend: function () {
                        loading = weui.loading('加载中');
                        recordCells.empty()
                    },
                    success: function (result) {
                        if(result.list.length > 0) {

                            $.map(result.list, function(p) {
                                var cell = ''+
                                    '<div class="weui-cell">'+
                                    '<div class="weui-cell__hd"><img src="'+p.headimgurl+'" alt="" style="width:20px;margin-right:5px;display:block"></div>'+
                                    '<div class="weui-cell__bd">'+
                                    '<p>'+p.nickname+'&nbsp;'+p.mobile.substr(0,3)+"****"+p.mobile.substr(7)+'</p>'+
                                    '</div>'+
                                    '<div class="weui-cell__ft">说明文字</div>'+
                                    '</div>';

                                recordCells.append(cell);
                            })
                        } else {
                            recordCells.html('暂无记录')
                        }
                        loading.hide();
                    },
                    complete: function () {
                    },
                    error: function (data) {
                        loading.hide();
                    }
                })
            }


            function print() {
                for(var i=0; i<arguments.length; i++) {
                    $('#console').append(JSON.stringify(arguments[i])).append("<br>")
                }
            }
        });
    </script>


</body>
</html>